<template>
    <div
        class="list-item"
        @click="
            $router.push({
                name: 'article',
                params: {
                    articleId: article.art_id.toString()
                }
            })
        "
    >
        <div class="user-wrap">
            <!-- 头像 -->
            <van-image
                slot="icon"
                class="avatar"
                fit="cover"
                round
                src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <div class="author-wrap">
                <div class="name">
                    {{ article.aut_name }}
                </div>
                <div class="pubdate">
                    {{ article.pubdate | relativeTime }}
                </div>
            </div>
        </div>
        <div class="title-wrap">
            <div class="title">
                {{ article.title }}
            </div>
            <div v-if="article.cover.type">
                <van-image
                    class="right-cover"
                    fit="cover"
                    :src="article.cover.images[0]"
                />
            </div>
        </div>
        <div class="count-wrap">
            <!-- 评论数量 -->
            <div class="count-item">
                <van-icon name="comment-o" />
                <span>{{ article.comm_count }}</span>
            </div>
            <!-- 点赞数量 -->
            <div class="count-item">
                <van-icon name="good-job-o" />
                <span>{{ article.like_count }}</span>
            </div>
            <!-- 收藏数量 -->
            <div class="count-item">
                <van-icon name="star-o" />
                <span>{{ article.collect_count }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'listItem',
    components: {},
    props: {
        article: {
            type: Object,
            required: true
        }
    },
    data () {
        return {

        }
    },
    created () { },
    mounted () { },
    methods: {},
    computed: {},
    watch: {}
}
</script>

<style scoped>
body {
    background-color: #ededed;
}
.user-wrap {
    display: flex;
    align-items: center;
    height: 36px;
    margin-top: 10px;
}
.avatar {
    width: 36px;
    height: 36px;
    margin-right: 10px;
}
.pubdate {
    font-size: 12px;
    color: #999;
}
.title-wrap {
    padding: 14px 0;
    display: flex;
    justify-content: space-between;
}
.title {
    font-size: 15px;
    color: #3a3a3a;
    padding-right: 5px;
}
.right-cover {
    width: 116px;
    height: 73px;
}
.count-wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 46px;
}
.count-wrap .van-icon {
    font-size: 18px;
    margin-right: 5px;
}
.count-item {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
